<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.common.min.js"></script>
    <script src="js/rem.js"></script>
    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        body, html {
            height: 100%;
            width: 100%;
            min-width: 1000px;
            overflow: hidden;
        }

        body {
            background: url("images/bg.jpg") no-repeat center;
            background-size: 100% 100%;;
        }

        /* div {
             border: 1px solid red;
         }*/

        .header {
            height: 10%;
            position: relative;
            font-size: 10px
        }

        .header > div {
            width: inherit;
            font-size: 0.05rem;
        }

        .header-left {
            position: absolute;
            left: 12%;
            top: 40%;
        }

        .warp {
            height: 100%;
        }

        .header-right {
            position: absolute;
            right: 1%;
            top: 29%;
        }

        .body {
            height: 60%;
            color: #FFF;

        }

        .body-ambo {
            width: 22%;
            height: 100%;
        }

        .body > div {
            float: left;
        }

        .body-center {
            width: 56%;
            height: 100%;
        }

        .footer {
            height: 30%;
        }

        .footer-child {
            float: left;
            width: 50%;
            height: 100%;
        }

        .body-ambo-s {
            height: 40%;
            position: relative;
        }

        .body-ambo-b {
            height: 60%;
            position: relative;
            overflow: hidden;
        }

        .body-center {
            background: url('images/map.jpg') no-repeat center;
            background-size: contain;
        }

        .visitor {
            height: 50%;
            font-size: 0.1rem;
            padding-top: 0.1rem;
            color: #FFF;
            text-indent: 0.11rem;
            position: relative;
        }

        .visitor > p {
            width: inherit;
            position: absolute;
            top: 50%;
            left: 2%;
        }
        .visitor>span{
            font-size: 0.065rem;
        }
        .visitor-staff {
            height: 50%;
            font-size: 0.08rem;
            font-family: "Quartz";
            color: rgb(3, 208, 133);
            position: relative;
        }

        .visitor-staff > div {
            margin-top: 10%;
            height: inherit;
            width: 50%;
            float: left;
            text-indent: 0.15rem;

        }
        .visitor-staff > div:nth-child(2){
            text-indent: 0.2rem;
        }
        .visitor-staff > div>p{
            font-size: 0.055rem;
        }
        .in-out {
            width: calc(100% + 20px);
            /*border: 1px solid red;*/
            position: absolute;
            top: 13%;
            height: 82%;
            overflow-y: scroll;
        }

        .in-out > li {
            height: 33%;
            position: relative;
        }

        .inout-icon {
            position: absolute;
            height: 50%;
            border-radius: 50%;
            top: 25%;
            left: 8%;
        }

        .inout-info {
            font-size: 0.05rem;
            color: #FFFFFF;
            position: absolute;
            line-height: 2;
            top: 20%;
            left: 25%;
        }

        .in-out-car .inout-icon {
            left: 5%;
        }

        .in {
            display: inline-block;
            width: 0.16rem;
            height: 0.07rem;
            border-radius: 0.035rem;
            background: #ff1d71;
            text-align: center;
            line-height: 0.075rem;
            margin-left: 0.05rem;
            /*29aae3*/
            vertical-align: middle;
        }

        .out {
            background: #29aae3;
            display: inline-block;
            width: 0.16rem;
            height: 0.07rem;
            border-radius: 0.035rem;
            text-align: center;
            line-height: 0.075rem;
            margin-left: 0.05rem;
            /*29aae3*/
            vertical-align: middle;
        }

        .in-out-car {
            width: calc(100% + 20px);
            position: absolute;
            top: 22%;
            height: 78%;
            overflow-y: scroll;
        }

        .in-out-car > li {
            height: 50%;
            position: relative;
        }

        .body-r-top {
            position: absolute;
            font-size: 0.15rem;
            top: 26%;
            left: 22%;
            color: rgb(32, 233, 255);
            text-shadow: 0 0 10px rgb(32, 233, 255);
        }

        .body-r-center {
            position: absolute;
            font-size: 0.15rem;
            top: 50%;
            left: 22%;
            color: rgb(32, 233, 255);
            line-height: 1.2;
            text-shadow: 0 0 10px rgb(32, 233, 255);
        }

        .body-r-bottom {
            position: absolute;
            top: 65%;
            width: 100%;
            bottom: 9%;
        }

        .body-r-bottom-content {
            width: 30%;
            height: 100%;
            background: url("images/carnum.png") no-repeat center;
            background-size: contain;
            float: left;
            font-size: 0.04rem;
            text-align: center;
        }

        .body-r-bottom-content > p {
            margin-top: 21%;
        }

        .body-r-bottom-content > span {
            font-size: 0.08rem;
            color: #20e9ff;
        }

        @font-face {
            font-family: "iconfont";
            src: url('font/iconfont.eot'); /* IE9*/
            src: url('font/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome, firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        @font-face {
            font-family: 'MyFont';
            src: url('font/7-segment.eot'); /* IE9 Compat Modes */
            src: url('font/7-segment.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/7-segment.woff') format('woff'), /* Modern Browsers */ url('font/7-segment.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/7-segment.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 0.13rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        .body-center {
            position: relative;
        }

        .body-center  i {
            position: absolute;
            top: 0;
            left: 0;
        }
        .body-center>div {
            position: absolute;
            top: 0;
            left: 0;
            width: 0.13rem;
            height: 0.2rem;
            cursor: pointer;
        }
        .body-center  >div >div{
            color:#FFF !important;
        }
        .body-center > i:hover {
            cursor: pointer;
        }

        .body-center > div> div > p {
            font-size: 0.06rem;
        }

        .body-center > div:hover > div {
            display: block;
        }

        .car-base {
            display: none;
            background: url("images/carInfo.png") no-repeat center;
            background-size: contain;
            font-size: 0.04rem;
            padding-top: 50%;
            padding-left: 30%;
            line-height: 1.8;
            position: absolute;
            width: 438%;
            height: 223%;
        }
        .fullClass {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            background-color: #183988
        }
        .info-cars-r-b{
            top: 60%;
            left: 61%;
        }
        .info-cars-r-t{
            top: -173%;
            left: 61%;
        }
        .info-cars-l-t{
            top: -173%;
            left: -401%;
        }
        .info-cars-l-b{
            top: 42%;
            left: -401%;
        }
        .info-cars-l{
            top: -66%;
            left: -401%;
        }
        .info-cars-r{
            top: -66%;
            left: 80%;
        }
        .info-cars-t {
            top: -164%;
            left: -235%;
        }
        .info-cars-b{
            top: 62%;
            left: -231%;
        }
    </style>

</head>
<body>
<div class="warp">
    <div class="header" style="color:#FFF;">
        <div class="header-left">2018-10-15 17:04:07 星期三</div>
        <div class="header-right"><img style="border-radius:50%;width: 0.15rem;vertical-align: middle;margin-right: 0.09rem" src="images/icon.jpg" alt=""><span>随便叫啥</span>|<a href="javascript:void(0)"
                                                                          id="js-cancelFullScreen">退出全屏</a><a
                href="javascript:void(0)" id="js-fullScreen">全屏</a></div>
    </div>
    <div class="body">
        <div class="body-ambo">
            <div class="body-ambo-s">
                <div class="visitor">
                    <span>当日场内访客</span>
                    <p>766999</p>
                </div>
                <div class="visitor-staff">
                    <div style="color: #f98c20;">
                        <p style="color:#FFF">当前入场访客</p>
                        766999
                    </div>
                    <div >
                        <p style="color:#FFF">当前场内员工</p>
                        13486
                    </div>
                </div>
            </div>
            <div class="body-ambo-b">
                <ul class="in-out">
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="out">出厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p style="vertical-align: middle;">张三<span class="in">入厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="in">入厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="body-center" style="font-size: 0.09rem">
            <a href="javascript:void(0)" id="full">全屏</a><a href="javascript:void(0)" id="colseFull">退出全屏</a>
            <!-- <i class="icon iconfont car">&#xe601;</i>
             <i class="icon iconfont people">&#xe600;</i>-->
            <i class='icon iconfont' style='visibility:hidden'>&#xe601;</i>
        </div>
        <div class="body-ambo">
            <div class="body-ambo-b" style="height:57%;">
                <div class="body-r-top" style="font-family: 'MyFont';">
                    408
                </div>
                <div class="body-r-center" style="font-family: 'MyFont';">
                    1356
                </div>
                <div class="body-r-bottom">
                    <div class='body-r-bottom-content'>
                        <p style="color:#f46376"> 当日总入场车辆</p>
                        <span>400</span>
                    </div>
                    <div class='body-r-bottom-content'><p style="color:#f98c20"> 当前场内车辆</p>
                        <span>980</span></div>
                    <div class='body-r-bottom-content'><p style="color:#03cc86"> 当日违章车辆</p>
                        <span>32</span></div>
                </div>
            </div>
            <div class="body-ambo-s">
                <ul class="in-out-car">
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="out">出厂</span></p>
                            <p>2018-10-15 17: 04 : 07<span>&nbsp;|</span> &nbsp;黄牌</p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p style="vertical-align: middle;">张三<span class="in">入厂</span></p>
                            <p>2018-10-15 17: 04 : 07 <span style="color:#d5d7de">|</span>&nbsp; 绿牌</p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <div id="main" class="footer-child">

        </div>
        <div id="main2" class="footer-child"></div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
    var car = [
        {type:1, name: "苏ABL4582",maxV: '0.1km/h',v: '80km/h', x: 0, y: 0, deg: 270},
        {type:2,name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 0, y: 300, deg: 20},
        {type:3,name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 100, y: 200, deg: 45}
        ,{type:4,name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 200, y: 92, deg: 45}]
    $(function () {
        var cordonW=0
        var cordonH=0
        var html = ""

        cordonW= $(".icon").width()*2.38
        cordonH=$(".icon").height()*2.23
        for (var i = 0; i < car.length; i++) {
            if(car[i].type==1){
                html += `<div class="carWarp" style='transform: translate(${car[i].x }px ,${car[i].y}px'>
<i class='icon iconfont' style='transform:rotate(${car[i].deg}deg);color:#f67b9b '>&#xe601;</i>
<div class="car-base info-cars-r-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`
            }else if(car[i].type==2) {


                html += `<div class="carWarp" style='transform: translate(${car[i].x }px ,${car[i].y}px'>
<i class='icon iconfont' style='color:#f67b9b '>&#xe600;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`

            }else if(car[i].type==3) {
                html += `<div class="carWarp" style='transform: translate(${car[i].x }px ,${car[i].y}px'>
<i class='icon iconfont' style='color:#a1ca45 '>&#xe600;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`

        }else if(car[i].type==4) {

                html += `<div class="carWarp" style='transform: translate(${car[i].x }px ,${car[i].y}px'>
<i class='icon iconfont' style='transform:rotate(${car[i].deg}deg);color:#a1ca45 '>&#xe601;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`
            }
        }
        $('.body-center').append(html)
        $('#full').click(function () {
            $(this).parent().addClass('fullClass')
        })
        $('#colseFull').click(function () {
            $(this).parent().removeClass('fullClass')
        })

        $('.body-center').on('mousemove',".carWarp",function(e){
            var mouseX=e.clientX||e.pageX
            var mouseY=e.clientY||e.pageY
            console.log(mouseX,mouseY)
            var warp_W= $('.body-center').width()
            var warp_H= $('.body-center').height()

            var warp_offy=$('.body-center').offset().top
            var warp_offx=$('.body-center').offset().left

            var X=mouseX-warp_offx
            var Y=mouseY-warp_offy
            /* cordonW= $(this).width()*4.38
             cordonH=$(this).height()*2.23*/
            //x<cordonW
            if(X<cordonW){
                if(Y<cordonH){  //左上角
                   $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l info-cars-l-t info-cars-l-b info-cars-r-t").addClass('info-cars-r-b')

                }else if(Y>warp_H-cordonH){   //左下角
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l info-cars-l-t info-cars-l-b info-cars-r-t info-cars-r-b").addClass('info-cars-r-t')
                }else if(Y>cordonH&&Y<warp_H-cordonH){  //左中
                    $(this).children('div').removeClass("info-cars-t info-cars-b  info-cars-l info-cars-l-t info-cars-l-b info-cars-r-t info-cars-r-b").addClass('info-cars-r')
                }
            }else if(X>warp_W-cordonW){
                if(Y<cordonH){   //右上角
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l info-cars-l-t info-cars-r-b info-cars-r-t").addClass('info-cars-l-b')
                }else if(Y>warp_H-cordonH){  //右下角
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-l-t')
                }else if(Y>cordonH&&Y<warp_H-cordonH){  //右中
                    $(this).children('div').removeClass("info-cars-t info-cars-b info-cars-r info-cars-l-t info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-l')
                }
            }else if(X<warp_W-cordonW&&X>cordonW){
                if(Y<cordonH){   //上中
                    $(this).children('div').removeClass("info-cars-t info-cars-l info-cars-r info-cars-l-t info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-b')
                }else if(Y>warp_H-cordonH){  //下中
                    $(this).children('div').removeClass("info-cars-b info-cars-l info-cars-r info-cars-l-t info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-t')
                }else if(Y>cordonH&&Y<warp_H-cordonH){  //中中
                    $(this).children('div').removeClass("info-cars-b info-cars-l info-cars-r info-cars-l-t info-cars-l-b info-cars-l-b info-cars-r-t").addClass('info-cars-t')
                }
            }

        })


    })
    var $fullScreen = document.getElementById("js-fullScreen");//按钮
    if ($fullScreen) {
        $fullScreen.addEventListener("click", function () {
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }, false);
    }
    var $cancelFullScreen = document.getElementById("js-cancelFullScreen");
    if ($cancelFullScreen) {
        $cancelFullScreen.addEventListener("click", function () {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }, false);
    }
</script>

<script>
    var myChart = echarts.init(document.getElementById('main'))
    var option = {
        title: {
            text: '场内人员统计图',
            textStyle: {
                color: '#FFF',
                fontWeight:"normal",
                fontFamily:"Microsoft YaHei"
            },
            left: "center"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            itemWidth: 14, // 设置宽度
            //itemGap: 40, // 设置间距
            itemHeight: 7, // 设置高度
            textStyle: {
                color: '#ffF'
            },
            left: '5%', //修改位置 left reight center 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left','center', 'right'。
            //如果 left 的值为'left', 'center','right'，组件会根据相应的位置自动对齐。
            top: "5%",
            data: ['入场', '出厂']
        },


        grid: {
            left: '4%',
            right: '5%',
            bottom: '10%',
            top: '20%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            axisTick: {
                show: false
            },
            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55','14:00','14:05',"14:10"]
        },
            {
            axisPointer: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },
            axisTick: {
                show: false
            },
            position: 'bottom',
            offset: 20
        }],
        yAxis: [{
            type: 'value',
            name: '单位1',
            gridIndex: 0,
            axisTick:{
                show:false
            },  //去掉坐标轴
            splitNumber: 6, //y轴 显示刻度个数   均分段数
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },

            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['transparent', 'rgba(250,250,250,0.05)']
                }
            }
        }],

        series: [{
            name: '出厂',
            type: 'line',
            smooth: true,
            stack: '总量1',
            symbol: 'circle',
            symbolSize: 5,  //更改圆点大小
            showSymbol: false,
            animationDelay: 1000,
            animationDuration: 1000,

            lineStyle: {
                normal: {
                    type: 'solid',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(41,170,227,0.4)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(41,170,227,0.0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: '#29aae3',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 15

                }
            },
            data: [220, 182, 191, 134, 250, 120, 110, 125, 145, 122, 165, 122]
        }, {
            name: '入场',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            stack: '总量2',
            symbolSize: 5,
            animationDelay: 1000,
            animationDuration: 1000,
            // markPoint: {
            //     data: [
            //         {type: 'max', name: '最大值'}
            //     ],
            //     animationDelay: 2000,
            //     animationDuration: 1000
            // },
            showSymbol: false,
            lineStyle: {
                normal: {
                    type: 'solid',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,127,0, 0.4)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(255,127,0, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(255,127,0)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12

                }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 282, 191, 134, 100]
        }, ]
    };

    myChart.setOption(option);
    var myChart2 = echarts.init(document.getElementById('main2'))
    var option2={
        title: {
            text: '场内车辆统计图',
            textStyle: {
                color: '#FFF',
                fontSize:18,
                fontWeight:"normal",
                fontFamily:"Microsoft YaHei"
            },
            left: "center"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            itemWidth: 14, // 设置宽度
            //itemGap: 40, // 设置间距
            itemHeight: 7, // 设置高度
            textStyle: {
                color: '#ffF'
            },
            left: '5%', //修改位置 left reight center 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left','center', 'right'。
            //如果 left 的值为'left', 'center','right'，组件会根据相应的位置自动对齐。
            top: "5%",
            data: [ '入场', '出厂']
        },


        grid: {
            left: '4%',
            right: '5%',
            bottom: '10%',
            top: '20%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            axisTick: {
                show: false
            },
            data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55','14:00','14:05',"14:10"]
        },
            {
                axisPointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: '#0E2A43'
                    }
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                offset: 20
            }],
        yAxis: [{
            type: 'value',
            name: '单位1',
            gridIndex: 0,
            axisTick:{
                show:false
            },  //去掉坐标轴
            splitNumber: 6, //y轴 显示刻度个数   均分段数
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#0E2A43'
                }
            },

            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12,
                    color: '#D5CBE8'
                }
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ['transparent', 'rgba(250,250,250,0.05)']
                }
            }
        }],

        series: [{
            name: '出厂',
            type: 'line',
            smooth: true,
            stack: '总量1',
            symbol: 'circle',
            symbolSize: 5,  //更改圆点大小
            showSymbol: false,
            animationDelay: 1000,
            animationDuration: 1000,

            lineStyle: {
                normal: {
                    type: 'solid',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(41,170,227,0.4)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(41,170,227,0.0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: '#29aae3',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 15

                }
            },
            data: [220, 182, 191, 134, 250, 120, 110, 125, 145, 122, 165, 122]
        }, {
            name: '入场',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            stack: '总量2',
            symbolSize: 5,
            animationDelay: 1000,
            animationDuration: 1000,
            // markPoint: {
            //     data: [
            //         {type: 'max', name: '最大值'}
            //     ],
            //     animationDelay: 2000,
            //     animationDuration: 1000
            // },
            showSymbol: false,
            lineStyle: {
                normal: {
                    type: 'solid',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,29,113, 0.4)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(255,29,113, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(255,29,113)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12

                }
            },
            data: [120, 110, 125, 145, 122, 165, 122, 220, 282, 191, 134, 100]
        }, ]
    };
    myChart2.setOption(option2);

    $(window).resize(function(){
        myChart.resize()
        myChart2.resize()
    })
</script>
</body>

</html>
